<template>
  <div class="content">
    <navBar :navBar="navBar" :callback="onClickRight"></navBar>
    <div class="contentInner">
      <div class="con">
        <div class="list">
          <div class="oneaddress" v-for="(item, index) in banklist" :key="index">
            <!-- <div class="imgbox">
              <img :src="item.qr" alt="" />
            </div> -->
            <span @click="selectaddres(item.addr)" style="width: 100%;padding-right: 30px;">
              <div class="con">
				  <img src="../../assets/img/bank.png" alt="" />
				  <div class="oneline">
					  {{item.bank_name}} ***** {{ item.addr.substr(-5) }}
				  </div>
				  <div class="oneline">{{item.name}}</div>
                <!-- <div class="oneline">{{ $t("币种") }}：{{ item.type }} - {{ item.link }}{{item.name}}</div>
                <div class="oneline">{{ item.type == 'CNY' ? $t("银行卡号") : $t("地址") }}：{{ item.addr }}</div>
                <div class="oneline">{{ $t("日期") }}：{{ item.addtime }}</div> -->
              </div>
            </span>
			<!-- <span class="del-btn" @click="deleteU(item.id)">删除</span> -->
          </div>
        </div>
		<div v-if="banklist.length == 0" class="add" @click="go('Bank')">绑定银行卡</div>
		<div v-else class="add" @click="goService">修改银行卡请联系在线客服</div>
		<div class="line"></div>
		<div class="list">
		  <div class="oneaddress" v-for="(item, index) in usdtlist" :key="index">
		    <!-- <div class="imgbox">
		      <img :src="item.qr" alt="" />
		    </div> -->
		    <span @click="selectaddres(item.addr)" style="width: 100%;padding-right: 30px;">
		      <div class="con">
				  <img src="../../assets/img/usdt.png" alt="" />
				  <div class="oneline">{{ item.addr.substring(0,5) }} ***** {{ item.addr.substr(-5) }}</div>
		        <!-- <div class="oneline">{{ $t("币种") }}：{{ item.type }} - {{ item.link }}{{item.name}}</div> -->
		        <!-- <div class="oneline">{{ item.type == 'CNY' ? $t("银行卡号") : $t("地址") }}：{{ item.addr }}</div> -->
		        <!-- <div class="oneline">{{ $t("日期") }}：{{ item.addtime }}</div> -->
		      </div>
		    </span>
			<!-- <span class="del-btn" @click="deleteU(item.id)">删除</span> -->
		  </div>
		</div>
		<div v-if="usdtlist.length == 0" class="add" @click="go('USDT')">绑定USDT</div>
		<div v-else class="add" @click="goService">修改USDT地址请联系在线客服</div>
        <!-- <div class="btn">
          <van-button type="info" size="large" @click="go">{{
            $t("添加钱包地址")
          }}</van-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("收款方式管理"),
        close: false,
        btn: "",
      },
      num: "",
      qiehuan: 1,
      num: "",

      list: [],
      banklist: [],
      usdtlist: [],
      type: 0,
    };
  },

  mounted() {
    this.getUsdtList();
    this.getBtcList();
    this.getEthList();
	this.getUSDTList();
	this.getRMBList();
    this.type = this.$route.query.type;
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "onlineService",
      });
    },
    go(e) {
      this.$router.push({
        name: "paymentMethod-add",
		query: {
		  type: e,
		},
      });
    },
	// 联系客服
	goService() {
	  this.$router.push({ path: "/onlineService" });
	},
    // 选择钱包地址
    selectaddres(addr) {
      if (this.tyep == 1) {
        this.$router.push({
          name: "withdrawal-open",
          query: {
            addr: addr,
          },
        });
      }
    },
    //获取钱包地址列表
    getUsdtList() {
      $postAxios(api.getWalletAddr, { type: "USDT" }, (res) => {
        console.log(res);
        if (res.code == 0) {
          // this.usdtlist = res.data;
          for (var i of res.data) {
            i.addtime = this.getdate(i.addtime);
            this.usdtlist.push(i);
          }
        }
      });
    },
	deleteU(id){
		$postAxios(api.delWalletAddr,{id:id},(res) => {
			this.list = [];
			if(res.code == 0){
				this.getUsdtList();
				this.getBtcList();
				this.getEthList();
				this.getUSDTList();
			}else{
				this.$toast(this.$t('失败'))
			}
			
		});
	},
    getBtcList() {
      $postAxios(api.getWalletAddr, { type: "BTC" }, (res) => {
        console.log(res);
        if (res.code == 0) {
          // this.btclist = res.data;
          for (var i of res.data) {
            i.addtime = this.getdate(i.addtime);
            this.list.push(i);
          }
        }
      });
    },
    getEthList() {
      $postAxios(api.getWalletAddr, { type: "ETH" }, (res) => {
        console.log(res);
        if (res.code == 0) {
          // this.ethlist = res.data;
          for (var i of res.data) {
            i.addtime = this.getdate(i.addtime);
            this.list.push(i);
          }
        }
      });
    },
	getRMBList() {
	  $postAxios(api.getWalletAddr, { type: "Bank" }, (res) => {
	    console.log(res);
	    if (res.code == 0) {
	      // this.ethlist = res.data;
	      for (var i of res.data) {
	        i.addtime = this.getdate(i.addtime);
	        this.banklist.push(i);
	      }
	    }
	  });
	},
	getUSDTList() {
	  $postAxios(api.getWalletAddr, { type: "USDC" }, (res) => {
	    console.log(res);
	    if (res.code == 0) {
	      // this.ethlist = res.data;
	      for (var i of res.data) {
	        i.addtime = this.getdate(i.addtime);
	        this.list.push(i);
	      }
	    }
	  });
	},
    //时间戳转日期
    getdate(nS) {
      //var offset = 	new Date().getTimezoneOffset() / 60 + 1;
      //console.log(offset);
      //var date = new Date(nS*1000 + offset * 3600  * 1000);  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(nS*1000);
	  var year = date.getFullYear(),
        month = ("0" + (date.getMonth() + 1)).slice(-2),
        sdate = ("0" + date.getDate()).slice(-2),
        hour = ("0" + date.getHours()).slice(-2),
        minute = ("0" + date.getMinutes()).slice(-2),
        second = ("0" + date.getSeconds()).slice(-2);
      // 拼接
      var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute;
      // 返回
      return result;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: #21212b;
  .emptyBox {
    width: 100%;
    height: 40px;
  }
  .contentInner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .list {
    width: 100%;
    padding: 10px 10px 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
    .oneaddress {
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0px 2px 5px 0px rgb(3 3 3 / 5%);
      border-radius: 15px;
      // border: 0.5px solid #ebebeb;
	  background-color: #262633;
      display: flex;
      align-items: center;
      // margin-bottom: 10px;
      .imgbox {
        width: 57px;
        height: 57px;
        img {
          width: 57px;
          height: 57px;
        }
      }

      .con {
		  width: 100%;
        padding-left: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		img{
			display: block;
			width: 50px;
			height: 50px;
		}
        .oneline {
			display: block;
          font-size: 14px;
          color: #fff;
        }
      }
    }
  }
  .btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
    .van-button--large {
      height: 40px !important;
    }
  }
}
.del-btn{
	font-size: 14px;
	float: right;
	color: red;
	/* text-align: right; */
	margin-left: 30px;
}
.add{
	margin: 0 auto;
	width: 90%;
	height: 60%;
	line-height: 36px;
	font-size: 16px;
	border-radius: 6px;
	background-color: #c73131;
	color: #fff;
	border: 0 none;
	margin-top: 20px;
	text-align: center;
}
.line{
	width: 90%;
	height: 1px;
	margin: 20px auto;
	background-color: #6f6f6f;
}
</style>
